<template style="background-color: #2b2d41">
  <div>
    <div style="width: 100%;">
      <van-icon
          style="position:fixed;top: 20px;left: 20px;cursor: pointer;border-radius: 50%"
          name="arrow-left" color="black"
          size="30px" @click="back"/>
      <p style="color: black;font-size: 16px;width: 100%;margin: 20px auto;">订单详情</p>
    </div>
    <img :src="order.imageUrl" style="width: 80%;margin: 20px auto;"/>
    <div style="margin: auto;background-color: #f5f7ff;width: 90%;border-radius: 20px;">
      <div class="rental-info-container">
        <div class="car-info">
          <h3 align="left">{{order.carName}}</h3>
        </div>
        <div class="rental-details">
          <br>
          <div class="item">
            <span class="label">租车人</span>
            <span class="value">{{order.userName}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">付款时间</span>
            <span class="value">{{order.paymentTime|format("yyyy-MM-dd")}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">租赁时间</span>
            <span class="value">{{order.rentalStartDate}} ~ {{order.rentalEndDate}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">提车地址</span>
            <span class="value">{{order.pickupLocation}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">总花费</span>
            <span class="value">¥{{order.totalPrice}}</span>
          </div>
        </div>
        <div class="evaluation-btn-container">
          <button @click="showEvaluation">我要评价</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RentalDetailsView",
  data() {
    return {
      userId: '',
      order: {
        imageUrl: '',
        carName: '',
        userName: '',
        paymentTime: '',
        rentalStartDate: '',
        rentalEndDate: '',
        pickupLocation: '',
        totalPrice: '',
      },
    }
  },
  created() {
    var user = localStorage.getItem("currentUser")
    if (user == null) {
      this.$message.error("请先登录")
      this.$router.push("/login")
      return;
    }
    this.userId = JSON.parse(user).userId
    this.getByUserId()
  },
  methods: {
    getByUserId() {
      this.axios.get(`http://localhost:10086/api/user/users/rentalDetails/` + this.userId).then(res => {
        if (res.data.code == 200){
          this.order = res.data.data
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    back() {
      this.$router.push("/my")
    },
    showEvaluation() {
      this.$router.push("/evaluate")
    }
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
}
</script>

<style scoped>
.rental-info-container {
  padding: 20px;
}

.car-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.details {
  display: flex;
  margin-top: 10px;
}

.details span {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}

.details i {
  margin-right: 5px;
}

.rental-details {
  margin-top: 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.label {
  font-size: 16px;
  font-weight: normal;
}

.value {
  width: 200px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}

.evaluation-btn-container {
  text-align: center;
  margin-top: 20px;
}

.evaluation-btn-container button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>